<template>
  <div class="box">
    <div class="hederdiv">
      <div class="zsum">
        <div style="width: 60px"></div>
        <!--        <img src="../imgs/camera_2.png" />-->
        <div class="zsum-s">杆塔总数</div>
        <div class="sum">{{ sumData.all }}</div>
      </div>
      <div class="zsum-tow">
        <div class="zzst">
          <span>在线数</span>
          <span style="color: #FFE56A">{{ sumData.online }}</span>
        </div>
        <div class="zzst">
          <span>离线数</span>
          <span style="color: #F28D49">{{ sumData.offline }}</span>
        </div>
      </div>
      <el-input style="width: 100%;background-color: transparent;overflow: auto" placeholder="请输入关键字"
        v-model="filterText" @input="filterChange">
        <template #prefix>
          <el-icon>
            <search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div :style="{ height: clientHeight - 300 + 'px' }" style="width: 100%">
      <el-tree class="treediv" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
        :filter-node-method="filterNode" highlight-current node-key="id" ref="tree"
        :default-expanded-keys="defaultExpandedKeys" style="height: 100%">
        <template #default="scope">
          <el-tooltip v-if="'f' == scope.data.status" effect="light" :content="scope.data.addr" placement="right">
            <el-button link type="danger"><i :class="scope.data.type"></i> {{ scope.data.name }}</el-button>
          </el-tooltip>
          <el-tooltip v-else-if="'t' == scope.data.status" effect="light" :content="scope.data.addr" placement="right">
            <el-button link type="success"><i :class="scope.data.type"></i> {{ scope.data.name }}</el-button>
          </el-tooltip>
          <span v-else> <i :class="scope.data.type"></i> {{ scope.data.name }} </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts">
  import useView from "@/hooks/useView";
  import { defineComponent, reactive, toRefs } from "vue";
  import baseService from "@/service/baseService";

  export default defineComponent({
    name: "RealTimeTree",
    setup() {
      const state = reactive({
        clientHeight: document.body.clientHeight,
        filterText: "",
        treeData: [],
        sumData: {
          all: 0,
          offline: 0,
          online: 0
        } as any,
        defaultProps: {
          children: "children",
          label: "name"
        },
        defaultExpandedKeys: [], // 初始为空数组
      });
      return { ...useView(state), ...toRefs(state) };
    },
    created() {
      // this.getInfo();
      this.getStationState();
    },
    methods: {
      // 总数
      getStationState() {
        baseService.get(`/homeData/getStationState`).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.sumData = res.data;
        });
      },
      // 获取信息
      getInfo() {
        baseService.get(`/KxStation/kxstation/getListTree`).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.getAllKeys(res.data.list);
          this.treeData = res.data.list;
          this.setDefaultCheckedNode();
        });
      },
      // 默认展开
      getAllKeys(nodes : any) {
        nodes.forEach((node : { id : never, children : any }) => {
          this.defaultExpandedKeys.push(node.id);
          if (node.children && node.children.length) {
            this.getAllKeys(node.children);
          }
        });
      },
      filterChange() {
        // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
        this.$refs.tree.filter(this.filterText);
      },
      filterNode(value : string, data : any, node : any) {
        // return data.label.includes(value)
        if (!value) return true;
        let parentNode = node.parent;
        let labels = [node.label];
        let level = 1;
        while (level < node.level) {
          labels = [...labels, parentNode.label];
          parentNode = parentNode.parent;
          level++;
        }
        return labels.some((label) => label.indexOf(value) !== -1);
      },
      handleNodeClick(data : any) {
        this.$emit("playVideo", data);
      },
      setDefaultCheckedNode() {
        const tree : any = this.$refs.tree;
        const nodes = this.flattenTreeData(this.treeData);
        const firstStationNode = nodes.find((node : any) => node.type == 'station');
        if (firstStationNode) {
          this.handleNodeClick(firstStationNode);
          tree.setCheckedKeys([firstStationNode.id], true);
        }
      },
      flattenTreeData(tree : any, result : any = []) {
        tree.forEach((node : any) => {
          result.push(node);
          if (node.children) {
            this.flattenTreeData(node.children, result);
          }
        });
        return result;
      }
    }
  });
</script>

<style lang="scss" scoped>
  // el-tree鼠标悬浮背景色
  ::v-deep .el-tree .el-tree-node__content:hover,
  .el-upload-list__item:hover {
    background-color: transparent;
    color: #FFF118;
  }

  ::v-deep .el-tree .el-tree-node__content {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
  }

  //背景色设置为透明
  :deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("../imgs/input_bj.png");
    background-size: 100% 100%;
  }

  //树选中样式
  ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: transparent;
    font-weight: 400;
    font-size: 14px;
    color: #00C4FF;
  }

  //输入框颜色
  :deep(.el-input__inner) {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #FFF118;
    border: 0;
  }

  ::v-deep .el-input__wrapper {
    box-shadow: none;
    border-bottom: 0 solid #dcdfe6;
  }

  ::v-deep .el-input__wrapper.is-focus {
    box-shadow: none;
    //border-bottom: 1px solid #07c160;
  }

  ::v-deep .el-input__wrapper:hover {
    box-shadow: none;
    //border-bottom: 1px solid #07c160;
  }

  .box {
    padding: 10px;
    overflow: hidden;
    position: relative;
    padding-top: 160px;
    color: #bed4e2;

    .hederdiv {
      position: absolute;
      top: 0px;
      left: 10px;
      right: 10px;
      padding-top: 10px;

      .zsum {
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-image: url(../imgs/camera_1.png);
        background-size: 100% 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        padding: 10px 20px;

        .zsum-s {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #CEFAFB;
        }

        .sum {
          width: 90px;
          color: #12dbf2;
          font-size: 26px;
          font-weight: 700;
          text-align: center;
        }
      }

      .zsum-tow {
        height: 28px;
        width: 100%;
        background-image: url(../imgs/camera_bg_2.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 6px 0;

        .zzst {
          flex: 0.5;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;
          padding: 0 14px;
        }
      }

      .input {
        margin-top: 0;
      }
    }

    .treediv {
      overflow: auto;
      padding: 0;
      background-color: transparent;
    }
  }
</style>

<style lang="scss">
  // /* 自定义滚动条样式 */
  // ::-webkit-scrollbar {
  //   width: 4px; /* 滚动条宽度 */
  // }

  // /* 滚动条轨道 */
  // ::-webkit-scrollbar-track {
  //   background-color: #ffffff; /* 轨道背景颜色 */
  // }

  // /* 滚动条滑块 */
  // ::-webkit-scrollbar-thumb {
  //   background-color: rgb(0, 229, 255); /* 滑块背景颜色 */
  // }

  // /* 滚动条滑块悬停状态 */
  // ::-webkit-scrollbar-thumb:hover {
  //   background-color: #e6e6e6; /* 悬停状态下滑块背景颜色 */
  // }

  // .live-tree {
  //   background-color: #022531 !important;
  //   color: rgb(18, 219, 242);
  // }
</style>
